import Vue from 'vue'
import Vuex from 'vuex'
import initialData from './data.json'
Vue.use(Vuex)

const CKTEXT = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'ck-text',
    detail: {
      text: '<p><span style="font-size:24px">请输入文字</span></p>',
      background: 'transparent'
    }
  }
}
const SHADOWTEXT = {
  x: 0,
  y: 5,
  w: 18,
  h: 4,
  i: '0',
  itemBackground: 'transparent',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'shadow-text',
    detail: {
      background: 'transparent',
      text: 'TU SHOW',
      fontFamily: 'Arial',
      fontSize: 72,
      fontWeight: 900,
      textAlign: 'center',
      textShadow1W: 2,
      textShadow1B: 4,
      textShadow1C: 'rgba(48, 34, 34, 1)',
      textShadow2W: 0,
      textShadow2B: 0,
      textShadow2C: '#fff',
      color: 'rgba(134, 178, 196,1)'
    }
  }
}
const BASEIMAGE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'base-image',
    detail: {
      src: ''
    }
  }
}
const BASETABLE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'base-table',
    detail: {
      sheetData: [['10%', '10%', '10%', '20%', '20%'],
        ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      baseTable: {
        align: 'center',
        border: true,
        headerColor: 'lightblue',
        stripe: true,
        size: 'medium'
      }
    }
  }
}
const MULTIBAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'multi-bar',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'top',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        type: 'category',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: true,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '10%'
      }
    }
  }
}
const STACKBAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'stack-bar',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        // formatter: '{@[0]},{@[1]}',
        position: 'insideTop',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'insideTop',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        type: 'category',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '2%'
      }
    }
  }
}
const BIBAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'bi-bar',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{c}',
        position: 'inside',
        distance: 2,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{c}',
          position: 'top',
          distance: 2,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'left',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const RANKINGBAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'ranking-bar',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{@[0]},{@[1]}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'category',
        position: 'left',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 18,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: true,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '10%'
      }
    }
  }
}
const CHINAMAPC = {
  x: 1,
  y: 2,
  w: 9,
  h: 13,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'china-map-c',
    detail: {
      sheetData: [
        ['河北', 4],
        ['山东', 3],
        ['河南', 3],
        ['重庆', 2],
        ['广西', 1],
        ['四川', 1],
        ['海南', 1],
        ['北京', 4],
        ['天津', 4],
        ['上海', 3],
        ['江苏', 3],
        ['浙江', 2],
        ['福建', 2],
        ['安徽', 3],
        ['江西', 2],
        ['湖北', 3],
        ['湖南', 2],
        ['广东', 1],
        ['辽宁', 4],
        ['吉林', 4],
        ['黑龙江', 4],
        ['内蒙古', 4],
        ['云南', 1],
        ['贵州', 1],
        ['山西', 5],
        ['陕西', 5],
        ['甘肃', 5],
        ['新疆', 5],
        ['西藏', 1],
        ['青海', 5],
        ['宁夏', 5],
        ['台湾', 'NaN'],
        ['香港', 'NaN'],
        ['澳门', 'NaN'],
        ['南海诸岛', 'NaN']
      ],
      nr: 34,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      visualMapC: {
        show: true,
        type: 'continuous',
        orient: 'vertical',
        left: '1%',
        right: 'auto',
        bottom: '1%',
        top: 'auto',
        min: 1,
        max: 10,
        text: ['High', 'Low'],
        textGap: 10,
        itemWidth: 20,
        itemHeight: 140,
        calculable: true,
        inRange: {
          color: ['#D7DA8B', '#E15457']
        }
      },
      simpleMap: {
        roam: true,
        left: 'center',
        right: 'auto',
        bottom: '1%',
        top: '5%',
        itemStyle: {
          normal: {
            borderColor: 'rgba(126, 51, 51, 1)'
          },
          emphasis: {
            areaColor: '#eee',
            borderColor: '#2B91B7'
          }
        }
      },
      title: {
        show: true,
        text: '中国地图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const CHINAMAPP = {
  x: 1,
  y: 2,
  w: 9,
  h: 13,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'china-map-p',
    detail: {
      sheetData: [
        ['河北', 4],
        ['山东', 3],
        ['河南', 3],
        ['重庆', 2],
        ['广西', 1],
        ['四川', 1],
        ['海南', 1],
        ['北京', 4],
        ['天津', 4],
        ['上海', 3],
        ['江苏', 3],
        ['浙江', 2],
        ['福建', 2],
        ['安徽', 3],
        ['江西', 2],
        ['湖北', 3],
        ['湖南', 2],
        ['广东', 1],
        ['辽宁', 4],
        ['吉林', 4],
        ['黑龙江', 4],
        ['内蒙古', 4],
        ['云南', 1],
        ['贵州', 1],
        ['山西', 5],
        ['陕西', 5],
        ['甘肃', 5],
        ['新疆', 5],
        ['西藏', 1],
        ['青海', 5],
        ['宁夏', 5],
        ['台湾', 'NaN'],
        ['香港', 'NaN'],
        ['澳门', 'NaN'],
        ['南海诸岛', 'NaN']
      ],
      nr: 34,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      visualMapP: {
        show: true,
        type: 'piecewise',
        pieces: [
          { min: 0, max: 1, color: 'red', label: '0~1', key: 1 }, // 不指定 max，表示 max 为无限大（Infinity）。
          { min: 2, max: 3, color: 'blue', key: 2 },
          { min: 4, max: 5, color: 'grey', key: 3 },
          { min: 6, max: 7, color: 'pink', key: 4 },
          { min: 8, max: 9, color: 'yellow', key: 5 }
        ],
        selectedMode: 'multiple',
        orient: 'vertical',
        left: '1%',
        right: 'auto',
        bottom: '1%',
        top: 'auto',
        itemGap: 10,
        itemWidth: 20,
        itemHeight: 14,
        itemSymbol: 'roundRect'
      },
      simpleMap: {
        roam: true,
        left: 'center',
        right: 'auto',
        bottom: '1%',
        top: '5%',
        itemStyle: {
          normal: {
            borderColor: 'rgba(126, 51, 51, 1)'
          },
          emphasis: {
            areaColor: '#eee',
            borderColor: '#2B91B7'
          }
        }
      },
      title: {
        show: true,
        text: '中国地图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const WORLDMAPC = {
  x: 1,
  y: 1,
  w: 16,
  h: 16,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'world-map-c',
    detail: {
      sheetData: [
        ['name', 'value'],
        ['Afghanistan', 28397.812],
        ['Angola', 19549.124],
        ['Albania', 3150.143],
        ['United Arab Emirates', 8441.537],
        ['United States', 8441.537],
        ['Argentina', 40374.224],
        ['Armenia', 2963.496],
        ['French Southern and Antarctic Lands', 268.065],
        ['Australia', 22404.488],
        ['Austria', 8401.924],
        ['Azerbaijan', 9094.718],
        ['Burundi', 9232.753],
        ['Belgium', 10941.288],
        ['Benin', 9509.798],
        ['Burkina Faso', 15540.284],
        ['Bangladesh', 151125.475],
        ['Bulgaria', 7389.175],
        ['The Bahamas', 66402.316],
        ['Bosnia and Herz.', 3845.929],
        ['Belarus', 9491.07],
        ['Belize', 308.595],
        ['Bermuda', 64.951],
        ['Bolivia', 716.939],
        ['Brazil', 195210.154],
        ['Brunei', 27.223],
        ['Bhutan', 716.939],
        ['Botswana', 1969.341],
        ['Central African Rep.', 4349.921],
        ['Canada', 34126.24],
        ['Switzerland', 7830.534],
        ['Chile', 17150.76],
        ['China', 1359821.465],
        ['Ivory Coast', 60508.978],
        ['Cameroon', 20624.343],
        ['Dem. Rep. Congo', 62191.161],
        ['Congo', 3573.024],
        ['Colombia', 46444.798],
        ['Costa Rica', 4669.685],
        ['Cuba', 11281.768],
        ['Northern Cyprus', 1.468],
        ['Cyprus', 1103.685],
        ['Czech Rep.', 10553.701],
        ['Germany', 83017.404],
        ['Djibouti', 834.036],
        ['Denmark', 5550.959],
        ['Dominican Republic', 10016.797],
        ['Algeria', 37062.82],
        ['Ecuador', 15001.072],
        ['Egypt', 78075.705],
        ['Eritrea', 5741.159],
        ['Spain', 46182.038],
        ['Estonia', 1298.533],
        ['Ethiopia', 87095.281],
        ['Finland', 5367.693],
        ['Fiji', 860.559],
        ['Falkland Islands', 49.581],
        ['France', 63230.866],
        ['Gabon', 1556.222],
        ['United Kingdom', 62066.35],
        ['Georgia', 4388.674],
        ['Ghana', 24262.901],
        ['Guinea', 10876.033],
        ['Gambia', 1680.64],
        ['Guinea Bissau', 10876.033],
        ['Equatorial Guinea', 696.167],
        ['Greece', 11109.999],
        ['Greenland', 56.546],
        ['Guatemala', 14341.576],
        ['French Guiana', 231.169],
        ['Guyana', 786.126],
        ['Honduras', 7621.204],
        ['Croatia', 4338.027],
        ['Haiti', 9896.4],
        ['Hungary', 10014.633],
        ['Indonesia', 240676.485],
        ['India', 1205624.648],
        ['Ireland', 4467.561],
        ['Iran', 240676.485],
        ['Iraq', 30962.38],
        ['Iceland', 318.042],
        ['Israel', 7420.368],
        ['Italy', 60508.978],
        ['Jamaica', 2741.485],
        ['Jordan', 6454.554],
        ['Japan', 127352.833],
        ['Kazakhstan', 15921.127],
        ['Kenya', 40909.194],
        ['Kyrgyzstan', 5334.223],
        ['Cambodia', 14364.931],
        ['Côte dlvoire', 14364.93],
        ['Korea', 51452.352],
        ['Kosovo', 97.743],
        ['Kuwait', 2991.58],
        ['Lao PDR', 6395.713],
        ['Lebanon', 4341.092],
        ['Liberia', 3957.99],
        ['Libya', 6040.612],
        ['Sri Lanka', 20758.779],
        ['Lesotho', 2008.921],
        ['Lithuania', 3068.457],
        ['Luxembourg', 507.885],
        ['Latvia', 2090.519],
        ['Morocco', 31642.36],
        ['Moldova', 103.619],
        ['Madagascar', 21079.532],
        ['Mexico', 117886.404],
        ['Macedonia', 507.885],
        ['Mali', 13985.961],
        ['Myanmar', 51931.231],
        ['Montenegro', 620.078],
        ['Mongolia', 2712.738],
        ['Mozambique', 23967.265],
        ['Mauritania', 3609.42],
        ['Malawi', 15013.694],
        ['Malaysia', 28275.835],
        ['Namibia', 2178.967],
        ['New Caledonia', 246.379],
        ['Niger', 15893.746],
        ['Nigeria', 159707.78],
        ['Nicaragua', 5822.209],
        ['Netherlands', 16615.243],
        ['Norway', 4891.251],
        ['Nepal', 26846.016],
        ['New Zealand', 4368.136],
        ['Oman', 2802.768],
        ['Pakistan', 173149.306],
        ['Panama', 3678.128],
        ['Peru', 29262.83],
        ['Philippines', 93444.322],
        ['Papua New Guinea', 6858.945],
        ['Poland', 38198.754],
        ['Puerto Rico', 3709.671],
        ['Dem. Rep. Korea', 1.468],
        ['Portugal', 10589.792],
        ['Paraguay', 6459.721],
        ['Qatar', 1749.713],
        ['Romania', 21861.476],
        ['Russia', 21861.476],
        ['Rwanda', 10836.732],
        ['W. Sahara', 514.648],
        ['Saudi Arabia', 27258.387],
        ['Sudan', 35652.002],
        ['S. Sudan', 9940.929],
        ['Senegal', 12950.564],
        ['Solomon Islands', 526.447],
        ['Sierra Leone', 5751.976],
        ['El Salvador', 6218.195],
        ['Somaliland', 9636.173],
        ['Somalia', 9636.173],
        ['Serbia', 3573.024],
        ['Suriname', 524.96],
        ['Slovakia', 5433.437],
        ['Slovenia', 2054.232],
        ['Sweden', 9382.297],
        ['Swaziland', 1193.148],
        ['Syria', 7830.534],
        ['Chad', 11720.781],
        ['Togo', 6306.014],
        ['Thailand', 66402.316],
        ['Tajikistan', 7627.326],
        ['Turkmenistan', 5041.995],
        ['East Timor', 10016.797],
        ['Trinidad and Tobago', 1328.095],
        ['Tunisia', 10631.83],
        ['Turkey', 72137.546],
        ['Tanzania', 44973.33],
        ['Uganda', 33987.213],
        ['Ukraine', 46050.22],
        ['Uruguay', 3371.982],
        ['United States of America', 312247.116],
        ['Uzbekistan', 27769.27],
        ['Venezuela', 236.299],
        ['Vietnam', 89047.397],
        ['Vanuatu', 236.299],
        ['West Bank', 13.565],
        ['Yemen', 22763.008],
        ['South Africa', 51452.352],
        ['Zambia', 13216.985],
        ['Zimbabwe', 13076.978]
      ],
      nr: 34,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      visualMapC: {
        show: true,
        type: 'continuous',
        orient: 'vertical',
        left: '1%',
        right: 'auto',
        bottom: '1%',
        top: 'auto',
        min: 1,
        max: 1500000,
        text: ['High', 'Low'],
        textGap: 10,
        itemWidth: 20,
        itemHeight: 140,
        calculable: true,
        inRange: {
          color: ['#D7DA8B', '#E15457']
        }
      },
      simpleMap: {
        roam: true,
        left: 'center',
        right: 'auto',
        bottom: '1%',
        top: '5%',
        itemStyle: {
          normal: {
            borderColor: 'rgba(126, 51, 51, 1)'
          },
          emphasis: {
            areaColor: '#eee',
            borderColor: '#2B91B7'
          }
        }
      },
      title: {
        show: true,
        text: 'World Population(2010)',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '1%',
        bottom: 'auto'
      }
    }
  }
}
const WORLDMAPP = {
  x: 1,
  y: 1,
  w: 16,
  h: 16,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'world-map-p',
    detail: {
      sheetData: [
        ['name', 'value'],
        ['Afghanistan', 28397.812],
        ['Angola', 19549.124],
        ['Albania', 3150.143],
        ['United Arab Emirates', 8441.537],
        ['United States', 8441.537],
        ['Argentina', 40374.224],
        ['Armenia', 2963.496],
        ['French Southern and Antarctic Lands', 268.065],
        ['Australia', 22404.488],
        ['Austria', 8401.924],
        ['Azerbaijan', 9094.718],
        ['Burundi', 9232.753],
        ['Belgium', 10941.288],
        ['Benin', 9509.798],
        ['Burkina Faso', 15540.284],
        ['Bangladesh', 151125.475],
        ['Bulgaria', 7389.175],
        ['The Bahamas', 66402.316],
        ['Bosnia and Herz.', 3845.929],
        ['Belarus', 9491.07],
        ['Belize', 308.595],
        ['Bermuda', 64.951],
        ['Bolivia', 716.939],
        ['Brazil', 195210.154],
        ['Brunei', 27.223],
        ['Bhutan', 716.939],
        ['Botswana', 1969.341],
        ['Central African Rep.', 4349.921],
        ['Canada', 34126.24],
        ['Switzerland', 7830.534],
        ['Chile', 17150.76],
        ['China', 1359821.465],
        ['Ivory Coast', 60508.978],
        ['Cameroon', 20624.343],
        ['Dem. Rep. Congo', 62191.161],
        ['Congo', 3573.024],
        ['Colombia', 46444.798],
        ['Costa Rica', 4669.685],
        ['Cuba', 11281.768],
        ['Northern Cyprus', 1.468],
        ['Cyprus', 1103.685],
        ['Czech Rep.', 10553.701],
        ['Germany', 83017.404],
        ['Djibouti', 834.036],
        ['Denmark', 5550.959],
        ['Dominican Republic', 10016.797],
        ['Algeria', 37062.82],
        ['Ecuador', 15001.072],
        ['Egypt', 78075.705],
        ['Eritrea', 5741.159],
        ['Spain', 46182.038],
        ['Estonia', 1298.533],
        ['Ethiopia', 87095.281],
        ['Finland', 5367.693],
        ['Fiji', 860.559],
        ['Falkland Islands', 49.581],
        ['France', 63230.866],
        ['Gabon', 1556.222],
        ['United Kingdom', 62066.35],
        ['Georgia', 4388.674],
        ['Ghana', 24262.901],
        ['Guinea', 10876.033],
        ['Gambia', 1680.64],
        ['Guinea Bissau', 10876.033],
        ['Equatorial Guinea', 696.167],
        ['Greece', 11109.999],
        ['Greenland', 56.546],
        ['Guatemala', 14341.576],
        ['French Guiana', 231.169],
        ['Guyana', 786.126],
        ['Honduras', 7621.204],
        ['Croatia', 4338.027],
        ['Haiti', 9896.4],
        ['Hungary', 10014.633],
        ['Indonesia', 240676.485],
        ['India', 1205624.648],
        ['Ireland', 4467.561],
        ['Iran', 240676.485],
        ['Iraq', 30962.38],
        ['Iceland', 318.042],
        ['Israel', 7420.368],
        ['Italy', 60508.978],
        ['Jamaica', 2741.485],
        ['Jordan', 6454.554],
        ['Japan', 127352.833],
        ['Kazakhstan', 15921.127],
        ['Kenya', 40909.194],
        ['Kyrgyzstan', 5334.223],
        ['Cambodia', 14364.931],
        ['Côte dlvoire', 14364.93],
        ['Korea', 51452.352],
        ['Kosovo', 97.743],
        ['Kuwait', 2991.58],
        ['Lao PDR', 6395.713],
        ['Lebanon', 4341.092],
        ['Liberia', 3957.99],
        ['Libya', 6040.612],
        ['Sri Lanka', 20758.779],
        ['Lesotho', 2008.921],
        ['Lithuania', 3068.457],
        ['Luxembourg', 507.885],
        ['Latvia', 2090.519],
        ['Morocco', 31642.36],
        ['Moldova', 103.619],
        ['Madagascar', 21079.532],
        ['Mexico', 117886.404],
        ['Macedonia', 507.885],
        ['Mali', 13985.961],
        ['Myanmar', 51931.231],
        ['Montenegro', 620.078],
        ['Mongolia', 2712.738],
        ['Mozambique', 23967.265],
        ['Mauritania', 3609.42],
        ['Malawi', 15013.694],
        ['Malaysia', 28275.835],
        ['Namibia', 2178.967],
        ['New Caledonia', 246.379],
        ['Niger', 15893.746],
        ['Nigeria', 159707.78],
        ['Nicaragua', 5822.209],
        ['Netherlands', 16615.243],
        ['Norway', 4891.251],
        ['Nepal', 26846.016],
        ['New Zealand', 4368.136],
        ['Oman', 2802.768],
        ['Pakistan', 173149.306],
        ['Panama', 3678.128],
        ['Peru', 29262.83],
        ['Philippines', 93444.322],
        ['Papua New Guinea', 6858.945],
        ['Poland', 38198.754],
        ['Puerto Rico', 3709.671],
        ['Dem. Rep. Korea', 1.468],
        ['Portugal', 10589.792],
        ['Paraguay', 6459.721],
        ['Qatar', 1749.713],
        ['Romania', 21861.476],
        ['Russia', 21861.476],
        ['Rwanda', 10836.732],
        ['W. Sahara', 514.648],
        ['Saudi Arabia', 27258.387],
        ['Sudan', 35652.002],
        ['S. Sudan', 9940.929],
        ['Senegal', 12950.564],
        ['Solomon Islands', 526.447],
        ['Sierra Leone', 5751.976],
        ['El Salvador', 6218.195],
        ['Somaliland', 9636.173],
        ['Somalia', 9636.173],
        ['Serbia', 3573.024],
        ['Suriname', 524.96],
        ['Slovakia', 5433.437],
        ['Slovenia', 2054.232],
        ['Sweden', 9382.297],
        ['Swaziland', 1193.148],
        ['Syria', 7830.534],
        ['Chad', 11720.781],
        ['Togo', 6306.014],
        ['Thailand', 66402.316],
        ['Tajikistan', 7627.326],
        ['Turkmenistan', 5041.995],
        ['East Timor', 10016.797],
        ['Trinidad and Tobago', 1328.095],
        ['Tunisia', 10631.83],
        ['Turkey', 72137.546],
        ['Tanzania', 44973.33],
        ['Uganda', 33987.213],
        ['Ukraine', 46050.22],
        ['Uruguay', 3371.982],
        ['United States of America', 312247.116],
        ['Uzbekistan', 27769.27],
        ['Venezuela', 236.299],
        ['Vietnam', 89047.397],
        ['Vanuatu', 236.299],
        ['West Bank', 13.565],
        ['Yemen', 22763.008],
        ['South Africa', 51452.352],
        ['Zambia', 13216.985],
        ['Zimbabwe', 13076.978]
      ],
      nr: 34,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      visualMapP: {
        show: true,
        type: 'piecewise',
        pieces: [
          { min: 0, max: 999, color: 'red', label: '0~1', key: 1 }, // 不指定 max，表示 max 为无限大（Infinity）。
          { min: 1000, max: 4999, color: 'blue', key: 2 },
          { min: 5000, max: 9999, color: 'grey', key: 3 },
          { min: 10000, max: 49999, color: 'pink', key: 4 },
          { min: 50000, max: 150000, color: 'yellow', key: 5 }
        ],
        selectedMode: 'multiple',
        orient: 'vertical',
        left: '1%',
        right: 'auto',
        bottom: '1%',
        top: 'auto',
        itemGap: 10,
        itemWidth: 20,
        itemHeight: 14,
        itemSymbol: 'roundRect'
      },
      simpleMap: {
        roam: true,
        left: 'center',
        right: 'auto',
        bottom: '1%',
        top: '5%',
        itemStyle: {
          normal: {
            borderColor: 'rgba(126, 51, 51, 1)'
          },
          emphasis: {
            areaColor: '#eee',
            borderColor: '#2B91B7'
          }
        }
      },
      title: {
        show: true,
        text: 'World Population(2010)',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '1%',
        bottom: 'auto'
      }
    }
  }
}
const DTRANKINGBAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'dt-ranking-bar',
    detail: {
      sheetData: [
        ['', '1月', '2月'],
        ['河南', 1, 4],
        ['河北', 2, 2],
        ['上海', 3, 3],
        ['山东', 4, 1]
      ],
      nr: 5,
      nc: 3,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      dtRankingBar: {
        top: 4,
        animationDuration: 1000,
        animationDurationUpdate: 2000,
        easing: 'quinticInOut',
        imageLabelPosition: 'left'
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: 20,
        right: 20,
        top: '85%',
        bottom: 'auto',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 2000,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left',
          color: '#304654',
          borderColor: '#304654',
          borderwidth: 1
        },
        label: {
          color: '#000',
          fontSize: 12
        },
        emphasis: {
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 22,
            itemGap: 12,
            position: 'left',
            color: '#304654',
            borderColor: '#304654',
            borderwidth: 1
          },
          label: {
            color: '#000',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        formatter: '{b}: {c}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        max: 5,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        zlevel: 2,
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '10%',
        top: '10%',
        bottom: '20%'
      },
      title: {
        show: true,
        text: '动态柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'auto',
        textVerticalAlign: 'auto',
        itemGap: 15,
        left: 'center',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const DTRANKINGBARIMAGE = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'dt-ranking-bar-image',
    detail: {
      sheetData: [
        ['', '1月', '2月', 'image'],
        ['河南', 1, 4, ''],
        ['河北', 2, 2, ''],
        ['上海', 3, 3, ''],
        ['山东', 4, 1, '']
      ],
      nr: 5,
      nc: 4,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      dtRankingBar: {
        top: 4,
        animationDuration: 1000,
        animationDurationUpdate: 2000,
        easing: 'quinticInOut',
        imageLabelPosition: 'left'
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: 20,
        right: 20,
        top: '85%',
        bottom: 'auto',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 2000,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left',
          color: '#304654',
          borderColor: '#304654',
          borderwidth: 1
        },
        label: {
          color: '#000',
          fontSize: 12
        },
        emphasis: {
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 22,
            itemGap: 12,
            position: 'left',
            color: '#304654',
            borderColor: '#304654',
            borderwidth: 1
          },
          label: {
            color: '#000',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        formatter: '{b}: {c}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        max: 5,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        zlevel: 2,
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '20%'
      },
      title: {
        show: true,
        text: '动态柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'auto',
        textVerticalAlign: 'auto',
        itemGap: 15,
        left: 'center',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const DTRANKINGBARGRADIENTIMAGE = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'dt-ranking-bar-gradient-image',
    detail: {
      sheetData: [
        ['', '1月', '2月', 'image'],
        ['河南', 1, 4, ''],
        ['河北', 2, 2, ''],
        ['上海', 3, 3, ''],
        ['山东', 4, 1, '']
      ],
      nr: 5,
      nc: 4,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      dtRankingBar: {
        top: 4,
        animationDuration: 1000,
        animationDurationUpdate: 2000,
        easing: 'quinticInOut',
        imageLabelPosition: 'left'
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: 20,
        right: 20,
        top: '85%',
        bottom: 'auto',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 2000,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left',
          color: '#304654',
          borderColor: '#304654',
          borderwidth: 1
        },
        label: {
          color: '#000',
          fontSize: 12
        },
        emphasis: {
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 22,
            itemGap: 12,
            position: 'left',
            color: '#304654',
            borderColor: '#304654',
            borderwidth: 1
          },
          label: {
            color: '#000',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        formatter: '{b}: {c}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        max: 5,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        zlevel: 2,
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '20%'
      },
      title: {
        show: true,
        text: '动态柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'auto',
        textVerticalAlign: 'auto',
        itemGap: 15,
        left: 'center',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const DTRANKINGBARGRADIENT = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'dt-ranking-bar-gradient',
    detail: {
      sheetData: [
        ['', '1月', '2月', '3月', '4月'],
        ['河南', 1, 4, 1, 4],
        ['河北', 2, 2, 3, 3],
        ['上海', 3, 3, 2, 2],
        ['山东', 4, 1, 4, 1]
      ],
      nr: 5,
      nc: 3,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      dtRankingBar: {
        top: 4,
        animationDuration: 1000,
        animationDurationUpdate: 2000,
        easing: 'quinticInOut',
        imageLabelPosition: 'left'
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: false,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: 20,
        right: 20,
        top: '85%',
        bottom: 'auto',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 2000,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left',
          color: '#304654',
          borderColor: '#304654',
          borderwidth: 1
        },
        label: {
          color: '#000',
          fontSize: 12
        },
        emphasis: {
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 22,
            itemGap: 12,
            position: 'left',
            color: '#304654',
            borderColor: '#304654',
            borderwidth: 1
          },
          label: {
            color: '#000',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        formatter: '{b}: {c}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        max: 5,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        zlevel: 2,
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '10%',
        top: '10%',
        bottom: '20%'
      },
      title: {
        show: true,
        text: '动态柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'auto',
        textVerticalAlign: 'auto',
        itemGap: 15,
        left: 'center',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const SIMPLEBUBBLE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-bubble',
    detail: {
      sheetData: [
        ['类别', 'x', 'y', '大小'],
        ['A', 10.0, 8.04, 10],
        ['A', 8.0, 6.95, 11],
        ['A', 13.0, 7.58, 12],
        ['A', 9.0, 8.81, 13],
        ['A', 11.0, 8.33, 14],
        ['B', 14.0, 9.96, 15],
        ['B', 6.0, 7.24, 16],
        ['B', 4.0, 4.26, 17],
        ['B', 12.0, 10.84, 18],
        ['B', 7.0, 4.82, 19],
        ['B', 5.0, 5.68, 20]
      ],
      nr: 12,
      nc: 4,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      label: {
        show: true,
        formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#fff',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      emphasis: {
        label: {
          show: true,
          formatter: '{@[0]},{@[1]}',
          position: 'top',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#fff',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 22,
        itemHeight: 12,
        /* icon: 'emptyCircle', */
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      title: {
        show: true,
        text: '气泡图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      xAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'dotted'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '10%'
      }
    }
  }
}
const SIMPLELINE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-line',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      simpleLine: {
        lineStyle: {
          width: 2,
          type: 'solid'
        },
        smooth: false,
        areaStyle: {
          opacity: 0.2
        }
      },
      title: {
        show: true,
        text: '折线图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 22,
        itemHeight: 12,
        /* icon: 'emptyCircle', */
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        boundaryGap: false,
        show: true,
        type: 'category',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: true,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: 20,
        right: 20,
        top: '20%',
        bottom: 20
      }
    }
  }
}
const SIMPLEPIE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-pie',
    detail: {
      sheetData: [
        ['男', 11],
        ['女', 15]
      ],
      nr: 2,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simplePie: {
        type: 'pie',
        hoveranimation: true,
        /* left: 'center',
        right: 'auto',
        top: '20%',
        bottom: 'auto', */
        clockwise: true,
        startAngle: 90,
        center: ['50%', '60%'],
        radius: ['30%', '75%'],
        label: {
          show: true,
          position: 'outside',
          formatter: '{@[0]}: {@[1]} {d}%',
          color: '#aaa',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          alignTo: 'none'
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        emphasis: {
          label: {
            show: true,
            position: 'outside',
            formatter: '{@[0]}: {@[1]} {d}%',
            color: '#aaa',
            fontWeight: 'bold',
            fontFamily: 'Arial',
            fontSize: 14,
            alignTo: 'none'
          },
          itemStyle: {
            borderColor: '#000',
            borderWidth: 0,
            borderType: 'solid',
            shadowBlur: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          }
        }
      },
      title: {
        show: true,
        text: '饼图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: '20',
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        // padding: [10, 100],
        itemGap: 10,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '10%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      }
    }
  }
}
const SIMPLESCATTER = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-scatter',
    detail: {
      sheetData: [
        ['组别', 'x', 'y'],
        ['A', 10.0, 8.04],
        ['A', 8.0, 6.95],
        ['A', 13.0, 7.58],
        ['B', 9.0, 8.81],
        ['B', 11.0, 8.33],
        ['B', 14.0, 9.96],
        ['B', 6.0, 7.24],
        ['C', 4.0, 4.26],
        ['C', 12.0, 10.84],
        ['C', 7.0, 4.82],
        ['C', 5.0, 5.68]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      label: {
        show: true,
        formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#fff',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      emphasis: {
        label: {
          show: true,
          formatter: '{@[0]},{@[1]}',
          position: 'top',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#fff',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      simpleScatter: {
        symbol: 'circle',
        symbolSize: 14
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 22,
        itemHeight: 12,
        /* icon: 'emptyCircle', */
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      title: {
        show: true,
        text: '散点图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        /* backgroundColor: 'transparent',
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 0,
        shadowColor: 'transparent',
        shaodowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 0, */
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      xAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'dotted'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: '#ccc',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '5%'
      }
    }
  }
}
const SIMPLEFUNNEL = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-funnel',
    detail: {
      sheetData: [
        ['Exposure', 100],
        ['Infection', 90],
        ['Symptom', 80],
        ['Outpatient', 70],
        ['Hospitalized', 60],
        ['Death', 50]
      ],
      nr: 6,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleFunnel: {
        type: 'funnel',
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '20%',
        min: 40,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        gap: 2,
        sort: 'ascending',
        funnelAlign: 'center',
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          /* color: '#aaa', */
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14
          // align: 'left'
        },
        labelLine: {
          show: true,
          length: 40,
          lineStyle: {
            // color: '#aaa',
            width: 2,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        },
        emphasis: {
          labelLine: {
            length: 40,
            lineStyle: {
              // color: '#aaa',
              width: 2,
              type: 'solid'
            }
          },
          label: {
            show: true,
            // position: 'inside',
            formatter: '{b}:{c}',
           /*  color: '#aaa', */
            fontWeight: 'bold',
            // fontFamily: 'Arial',
            fontSize: 15
            // align: 'center'
          },
          itemStyle: {
            borderColor: '#000',
            borderWidth: 0,
            borderType: 'solid',
            shadowBlur: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          }
        }
      },
      title: {
        show: true,
        text: '漏斗图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: '20',
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        // padding: [10, 100],
        itemGap: 10,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: false,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: 'auto',
        bottom: '5%',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      }
    }
  }
}
const SIMPLERADAR = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-radar',
    detail: {
      sheetData: [
        ['', 'AQI', 'PM2.5', 'PM10', 'CO', 'NO2', 'SO2'],
        ['最大值', 100, 50, 150, 5, 50, 50],
        ['上海', 91, 45, 125, 0.82, 34, 23],
        ['北京', 55, 9, 56, 0.46, 18, 6],
        ['广州', 26, 37, 27, 1.163, 27, 13]
      ],
      nr: 5,
      nc: 7,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleRadar: {
        shape: 'polygon',
        splitNumber: 5,
        name: {
            textStyle: {
                color: 'rgb(238, 197, 102)',
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 14
            }
        },
        nameGap: 15,
        center: ['50%', '50%'],
        radius: ['0%', '70%'],
        startAngle: 90,
        axisLabel: {
          show: true,
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(238, 197, 102, 1)',
            width: 1,
            type: 'solid'
          }
        },
        splitArea: {
            show: true
        },
        axisLine: {
          lineStyle: {
            color: 'grey',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          length: 2,
          lineStyle: {
            color: 'grey',
            width: 1
          }
        },
        areaStyle: {
          opacity: 0
        }
      },
      title: {
        show: true,
        text: '雷达图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        // padding: [10, 100],
        itemGap: 10,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: 'auto',
        bottom: '1%',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      }
    }
  }
}
const SIMPLESANKEY = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'simple-sankey',
    detail: {
      sheetData: [
        ['名称', '层级', '总数', '来源', '目标', '数量'],
        ['A', 0, 100, 'A', 'B1', 50],
        ['B1', 1, 50, 'A', 'B2', 40],
        ['B2', 1, 40, 'A', 'C1', 10],
        ['C1', 2, 50, 'B1', 'C1', 20],
        ['C2', 2, 40, 'B1', 'C2', 20],
        [null, null, null, 'B2', 'C1', 20],
        [null, null, null, 'B2', 'C2', 20]
      ],
      nr: 8,
      nc: 6,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleSankey: {
        left: '5%',
        right: '5%',
        top: '10%',
        bottom: '5%',
        nodeWidth: 20,
        nodeGap: 8,
        orient: 'horizontal',
        label: {
          show: true,
          position: 'right',
          distance: 5,
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 12
        }
      },
      title: {
        show: true,
        text: '桑基图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        // padding: [10, 100],
        itemGap: 10,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      }
    }
  }
}
const BARLINE = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'bar-line',
    detail: {
      sheetData: [['', '粗产量', '残次率'],
        ['2010', 100, 13.2],
        ['2011', 120, 12.4],
        ['2012', 170, 10.7],
        ['2013', 250, 14.1],
        ['2014', 200, 11.5],
        ['2015', 150, 13.5]
      ],
      nr: 7,
      nc: 3,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      simpleLine: {
        lineStyle: {
          width: 1,
          type: 'solid'
        },
        smooth: true,
        areaStyle: {
          opacity: 0
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'top',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: '',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 14,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      },
      xAxis: {
        show: true,
        type: 'category',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '8%'
      }
    }
  }
}
const POPPYRAMID = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'pop-pyramid',
    detail: {
      sheetData: [
        ['年龄', '男性', '女性'],
        ['0-4岁', 41062566, 34470044],
        ['5-9岁', 38464665, 32416884],
        ['10-14岁', 40267277, 34641185],
        ['15-19岁', 51904830, 47984284],
        ['20-24岁', 64008573, 63403945],
        ['25-29岁', 50837038, 50176814],
        ['30-34岁', 49521822, 47616381],
        ['35-39岁', 60391104, 57634855],
        ['40-44岁', 63608678, 61145286],
        ['45-49岁', 53776418, 51818135],
        ['50-54岁', 40363234, 38389937],
        ['55-59岁', 41082938, 40229536],
        ['60-64岁', 29834426, 28832856],
        ['65-69岁', 20748471, 20364811],
        ['70-74岁', 16403453, 16568944],
        ['75-79岁', 11278859, 12573274],
        ['80-84岁', 5917502, 7455696],
        ['85-89岁', 2199810, 3432118],
        ['90-94岁', 530872, 1047435],
        ['95-99岁', 117716, 252263],
        ['100岁及以上', 8852, 27082]
      ],
      nr: 22,
      nc: 3,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      popPyramid: {
        max: 64008573
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '5%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'pure',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
              offset: 0, color: '#ee9ca7' // 0% 处的颜色
          }, {
              offset: 1, color: '#ffdde1' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'inside',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '2010年中国人口金字塔',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '第六次人口普查',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: true,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: '',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      }
    }
  }
}
const WORDCLOUD = {
  x: 1,
  y: 2,
  w: 8,
  h: 7,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'word-cloud',
    detail: {
      sheetData: [
        ['新冠', 1000],
        ['传染病', 1000],
        ['epidemic', 1000],
        ['疫区', 1000],
        ['COVID-19', 1000],
        ['武汉', 750],
        ['钟南山', 800],
        ['隔离', 500],
        ['口罩', 600],
        ['方舱医院', 400],
        ['世界卫生组织', 400],
        ['谭德赛', 400],
        ['WHO', 400],
        ['医护人员', 800],
        ['大流行', 900],
        ['Pandemic', 900],
        ['援鄂', 800],
        ['蝙蝠', 300],
        ['野味', 300],
        ['华南海鲜市场', 600]
      ],
      nr: 20,
      nc: 2,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      wordCloud: {
        src: 'data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgNTQ4LjE3NiA1NDguMTc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NDguMTc2IDU0OC4xNzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNTI0LjE4MywyOTcuMDY1Yy0xNS45ODUtMTkuODkzLTM2LjI2NS0zMi42OTEtNjAuODE1LTM4LjM5OWM3LjgxLTExLjk5MywxMS43MDQtMjUuMTI2LDExLjcwNC0zOS4zOTkgICBjMC0yMC4xNzctNy4xMzktMzcuNDAxLTIxLjQwOS01MS42NzhjLTE0LjI3My0xNC4yNzItMzEuNDk4LTIxLjQxMS01MS42NzUtMjEuNDExYy0xOC4yNzEsMC0zNC4wNzEsNS45MDEtNDcuMzksMTcuNzAzICAgYy0xMS4yMjUtMjcuMDI4LTI5LjA3NS00OC45MTctNTMuNTI5LTY1LjY2N2MtMjQuNDYtMTYuNzQ2LTUxLjcyOC0yNS4xMjUtODEuODAyLTI1LjEyNWMtNDAuMzQ5LDAtNzQuODAyLDE0LjI3OS0xMDMuMzUzLDQyLjgzICAgYy0yOC41NTMsMjguNTQ0LTQyLjgyNSw2Mi45OTktNDIuODI1LDEwMy4zNTFjMCwyLjg1NiwwLjE5MSw2Ljk0NSwwLjU3MSwxMi4yNzVjLTIyLjA3OCwxMC4yNzktMzkuODc2LDI1LjgzOC01My4zODksNDYuNjg2ICAgQzYuNzU5LDI5OS4wNjcsMCwzMjIuMDU1LDAsMzQ3LjE4YzAsMzUuMjExLDEyLjUxNyw2NS4zMzMsMzcuNTQ0LDkwLjM1OWMyNS4wMjgsMjUuMDMzLDU1LjE1LDM3LjU0OCw5MC4zNjIsMzcuNTQ4aDMxMC42MzYgICBjMzAuMjU5LDAsNTYuMDk2LTEwLjcxNSw3Ny41MTItMzIuMTIxYzIxLjQxMy0yMS40MTIsMzIuMTIxLTQ3LjI0OSwzMi4xMjEtNzcuNTE1ICAgQzU0OC4xNzIsMzM5Ljc1Nyw1NDAuMTc0LDMxNi45NTIsNTI0LjE4MywyOTcuMDY1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=',
        shape: 'diamond',
        left: null,
        right: null,
        top: null,
        bottom: null,
        width: '100%',
        height: '100%',
        sizeRange: [12, 40],
        rotationRange: [-5, 5],
        rotationStep: 1,
        gridSize: 8,
        drawOutOfBound: false,
        fontFamily: 'sans-serif',
        fontWeight: 'bold'
      },
      title: {
        show: true,
        text: '2010年中国人口金字塔',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '第六次人口普查',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      }
    }
  }
}
const BARZOOM = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'bar-zoom',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: false,
        // formatter: '{@[0]},{@[1]}',
        position: 'top',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          // formatter: '{@[0]},{@[1]}',
          position: 'top',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      title: {
        show: true,
        text: '柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 15,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        icon: 'roundRect',
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 3,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dotted'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '10%'
      },
      dataZoom: {
        handleSize: '100%',
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        left: '5%',
        right: '5%',
        top: '92%',
        bottom: '5%',
        height: 20,
        borderColor: '#ddd'
      }
    }
  }
}
const LINEZOOM = {
  x: 1,
  y: 2,
  w: 8,
  h: 14,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'line-zoom',
    detail: {
      sheetData: [['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
        ['2017', 10, 11, 12, 13],
        ['2018', 20, 11, 14, 13],
        ['2019', 30, 15, 12, 13]
      ],
      nr: 4,
      nc: 5,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      simpleLine: {
        lineStyle: {
          width: 2,
          type: 'solid'
        },
        smooth: false,
        areaStyle: {
          opacity: 0.2
        }
      },
      title: {
        show: true,
        text: '折线图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      },
      legend: {
        show: true,
        type: 'plain',
        left: 'center',
        right: 'auto',
        top: '5%',
        bottom: 'auto',
        orient: 'horizontal',
        align: 'auto',
        padding: 5,
        itemGap: 10,
        itemWidth: 22,
        itemHeight: 12,
        /* icon: 'emptyCircle', */
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
          lineHeight: 56
        }
      },
      color: {
        option: 'pure',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        boundaryGap: false,
        show: true,
        type: 'category',
        position: 'bottom',
        name: 'X轴名称',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        position: 'bottom',
        name: 'Y轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 25,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: true,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '5%',
        right: '5%',
        top: '20%',
        bottom: '10%'
      },
      dataZoom: {
        handleSize: '100%',
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        left: '5%',
        right: '5%',
        top: '92%',
        bottom: '5%',
        height: 20,
        borderColor: '#ddd'
      }
    }
  }
}
const CUSTOM = {
  x: 1,
  y: 2,
  w: 10,
  h: 15,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'custom',
    detail: {
      option: {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    }
    }
  }
}
const SLIDE = {
  i: '0',
  x: 0,
  y: 0,
  w: 1,
  h: 5,
  slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
  SlideContent: []
}
// 保留图表
const MYRANKINGIMAGE = {
  x: 1,
  y: 2,
  w: 10,
  h: 11,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'my-ranking-image',
    detail: {
      sheetData: [
        ['', '1月', '2月', 'image'],
        ['河南', 1, 4, ''],
        ['河北', 2, 2, ''],
        ['上海', 3, 3, ''],
        ['山东', 4, 1, '']
      ],
      nr: 5,
      nc: 4,
      animation: true,
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      myRanking: {
        step: 0.01,
        tofixed: 3
      },
      dtRankingBar: {
        top: 4,
        animationDuration: 50,
        animationDurationUpdate: 50,
        easing: 'linear',
        imageLabelPosition: 'left'
      },
      simpleBar: {
        barMaxWidth: 50,
        barGap: '30%',
        barCategoryGap: '20%',
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0]
        },
        showBackground: true,
        backgroundStyle: {
          option: 'pure',
          pure: 'rgba(220, 220, 220, 0.1)',
          linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false}
        }
      }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: 20,
        right: 20,
        top: '85%',
        bottom: 'auto',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 50,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left',
          color: '#304654',
          borderColor: '#304654',
          borderwidth: 1
        },
        label: {
          color: '#000',
          fontSize: 12
        },
        emphasis: {
          controlStyle: {
            show: true,
            showPlayBtn: true,
            showPrevBtn: true,
            showNextBtn: true,
            itemSize: 22,
            itemGap: 12,
            position: 'left',
            color: '#304654',
            borderColor: '#304654',
            borderwidth: 1
          },
          label: {
            color: '#000',
            fontSize: 12
          }
        }
      },
      itemStyle: {
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        shadowBlur: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 1,
        shadowOffsetY: 1
      },
      label: {
        show: true,
        formatter: '{b}: {c}',
        position: 'right',
        distance: 5,
        rotate: 0,
        offset: [0, 0],
        color: '#000',
        fontWeight: 'normal',
        fontFamily: 'san-serif',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 5,
          rotate: 0,
          offset: [0, 0],
          color: '#000',
          fontWeight: 'normal',
          fontFamily: 'san-serif',
          fontSize: 12
        },
        itemStyle: {
          borderColor: '#000',
          borderWidth: 0,
          borderType: 'solid',
          shadowBlur: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      },
      color: {
        option: 'linear',
        pure: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', 'rgba(0,0,84,1)'],
        linear: [{ type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#2c3e50' }, { offset: 1, color: '#bdc3c7' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ee9ca7' }, { offset: 1, color: '#ffdde1' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false },
                 { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'red' }, { offset: 1, color: 'blue' }], global: false }]
      },
      xAxis: {
        show: true,
        // max: 5,
        type: 'value',
        position: 'top',
        name: 'X轴名称',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: false,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 9],
          symbolOffset: 6,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: true,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      yAxis: {
        zlevel: 2,
        show: true,
        type: 'category',
        position: 'bottom',
        name: '',
        nameLocation: 'center',
        nameTextStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        nameGap: 5,
        nameRotate: 0,
        inverse: true,
        axisLine: {
          show: true,
          onZero: true,
          symbol: ['none', 'none'],
          symbolOffset: 6,
          symbolSize: [6, 9],
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: true,
          alignWithLable: false,
          interval: 'auto',
          inside: false,
          length: 5,
          lineStyle: {
            color: '#333',
            width: 1,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          color: '#333',
          interval: 'auto',
          rotate: 0,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei',
          fontSize: 14,
          lineHeight: 5
        },
        splitLine: {
          show: false,
          interval: 'auto',
          lineStyle: {
            color: 'rgba(28, 51, 28, 0.81)',
            width: 1,
            type: 'dashed'
          }
        }
      },
      grid: {
        containLabel: true,
        show: false,
        backgroundColor: 'transparent',
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '20%'
      },
      title: {
        show: true,
        text: '动态柱状图',
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        subtext: '',
        subtextStyle: {
          color: '#100',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 12,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 1,
          textShadowColor: 'transparent',
          textShadowBlur: 10,
          textShadowOffsetX: 1,
          textShadowOffsetY: 5
        },
        textAlign: 'auto',
        textVerticalAlign: 'auto',
        itemGap: 15,
        left: 'center',
        right: 'auto',
        top: '2%',
        bottom: 'auto'
      }
    }
  }
}
const DTCHINAMAP = {
  x: 1,
  y: 2,
  w: 9,
  h: 13,
  i: '0',
  itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
  itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
  itemContent: {
    type: 'dt-china-map',
    detail: {
      sheetData: [
        ['province', '2010', '2011', '2012'],
        ['河北', 4, 5, 6],
        ['山东', 3, 5, 6],
        ['河南', 3, 5, 6],
        ['重庆', 2, 5, 6],
        ['广西', 1, 5, 6],
        ['四川', 1, 5, 6],
        ['海南', 1, 5, 6],
        ['北京', 4, 5, 6],
        ['天津', 4, 5, 6],
        ['上海', 3, 5, 6],
        ['江苏', 3, 5, 6],
        ['浙江', 2, 5, 6],
        ['福建', 2, 5, 6],
        ['安徽', 3, 5, 6],
        ['江西', 2, 5, 6],
        ['湖北', 3, 5, 6],
        ['湖南', 2, 5, 6],
        ['广东', 1, 5, 6],
        ['辽宁', 4, 5, 6],
        ['吉林', 4, 5, 6],
        ['黑龙江', 4, 2, 3],
        ['内蒙古', 4, 4, 7],
        ['云南', 1, 2, 3],
        ['贵州', 1, 2, 3],
        ['山西', 5, 2, 3],
        ['陕西', 5, 2, 3],
        ['甘肃', 5, 2, 3],
        ['新疆', 5, 2, 3],
        ['西藏', 1, 2, 3],
        ['青海', 5, 2, 3],
        ['宁夏', 5, 2, 3],
        ['台湾', 5, 2, 3],
        ['香港', 5, 2, 3],
        ['澳门', 5, 2, 3],
        ['南海诸岛', 'NaN', 'NaN', 'NaN']
      ],
      nr: 36,
      nc: 4,
      animation: true,
      dtMap: {
        baseTitle: '年各省市人口数',
        roam: true,
        left: 'center',
        right: 'auto',
        bottom: '15%',
        top: '5%',
        itemStyle: {
          normal: {
            borderColor: 'rgba(126, 51, 51, 1)'
          },
          emphasis: {
            areaColor: '#eee',
            borderColor: '#2B91B7'
          }
        }
      },
      timeline: {
        show: true,
        orient: 'horizontal',
        inverse: false,
        left: '10%',
        right: '10%',
        top: '85%',
        bottom: '1%',
        axisType: 'category',
        currentIndex: 0,
        autoPlay: true,
        rewind: false,
        loop: true,
        playInterval: 2000,
        realtime: true,
        controlPosition: 'left',
        symbol: 'emptyCircle',
        symbolSize: 10,
        lineStyle: {
          show: true,
          color: '#304654',
          width: 2,
          type: 'solid'
        },
        controlStyle: {
          show: true,
          showPlayBtn: true,
          showPrevBtn: true,
          showNextBtn: true,
          itemSize: 22,
          itemGap: 12,
          position: 'left'
        }
      },
      backgroundColor: {
        option: 'pure',
        pure: 'transparent',
        linear: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
          }, {
              offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      },
      visualMapC: {
        show: true,
        type: 'continuous',
        orient: 'vertical',
        left: '1%',
        right: 'auto',
        bottom: '1%',
        top: 'auto',
        min: 1,
        max: 10,
        text: ['High', 'Low'],
        textGap: 10,
        itemWidth: 20,
        itemHeight: 140,
        calculable: true,
        inRange: {
          color: ['#D7DA8B', '#E15457']
        }
      },
      title: {
        show: true,
        textStyle: {
          color: '#333',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Microsoft YaHei',
          fontSize: 20,
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        subtext: '',
        subtextStyle: {
          color: '#aaa',
          fontStyle: 'normal',
          fontWeight: 'bold',
          fontFamily: 'Arial',
          fontSize: 14,
          align: 'center',
          lineHeight: 5,
          textBorderColor: 'transparent',
          textBorderWidth: 0,
          textShadowColor: 'transparent',
          textShadowBlur: 2,
          textShadowOffsetX: 1,
          textShadowOffsetY: 1
        },
        textAlign: 'center',
        textVerticalAlign: 'auto',
        padding: 5,
        itemGap: 12,
        left: '50%',
        right: 'auto',
        top: '1%',
        bottom: 'auto'
      }
    }
  }
}
console.log(MYRANKINGIMAGE, DTCHINAMAP)

export default new Vuex.Store({
  state: {
    itemTemplate: {
      CKTEXT, SHADOWTEXT, BASEIMAGE, BASETABLE, MULTIBAR, STACKBAR, RANKINGBAR, BIBAR, CHINAMAPC, CHINAMAPP, WORLDMAPC, WORLDMAPP, DTRANKINGBAR, DTRANKINGBARIMAGE, DTRANKINGBARGRADIENT, DTRANKINGBARGRADIENTIMAGE, SIMPLEBUBBLE, SIMPLELINE, SIMPLEPIE, SIMPLESCATTER, SIMPLEFUNNEL, SIMPLERADAR, SIMPLESANKEY, BARLINE, POPPYRAMID, WORDCLOUD, BARZOOM, LINEZOOM
    },
    slideTemplate: {
      SLIDE
    },
    layout: JSON.parse(JSON.stringify(initialData.layout)),
    layout1: [
      {
        i: '0',
        x: 0,
        y: 0,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [{
          x: 0,
          y: 4,
          w: 18,
          h: 4,
          i: '0',
          itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 0 },
          itemAnimation: { order: 1, enter: 'fadeIn', leave: 'fadeOut' },
          itemContent: {
            type: 'ck-text',
            detail: {
              text: '<p style="text-align:center;"><span style="font-size:48px;"><strong>XX公司2020年度总结</strong></span></p>',
              background: 'transparent'
            }
          }
        },
        {
          x: 7,
          y: 9,
          w: 4,
          h: 2,
          i: '1',
          itemBorder: { width: 0, type: 'solid', color: '#808080', radius: 1 },
          itemAnimation: { order: 2, enter: 'fadeIn', leave: 'fadeOut' },
          itemContent: {
            type: 'ck-text',
            detail: {
              text: '<p style="text-align:center;"><span style="font-size:24px;font-family:楷体;">2020.03.30</span></p>',
              background: 'rgba(1,1,1,0.08)'
            }
          }
        }]
      },
      {
        i: '1',
        x: 0,
        y: 1,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(MULTIBAR))]
      },
      {
        i: '4',
        x: 0,
        y: 4,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(BIBAR))]
      },
      {
        i: '5',
        x: 0,
        y: 5,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLEPIE))]
      },
      {
        i: '6',
        x: 0,
        y: 6,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLESCATTER))]
      },
      {
        i: '7',
        x: 0,
        y: 7,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(CHINAMAPC))]
      },
      {
        i: '8',
        x: 0,
        y: 8,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(DTCHINAMAP))]
      },
      {
        i: '9',
        x: 0,
        y: 9,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLELINE))]
      },
      {
        i: '10',
        x: 0,
        y: 10,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLEBUBBLE))]
      },
      {
        i: '11',
        x: 0,
        y: 11,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(STACKBAR))]
      },
      {
        i: '12',
        x: 0,
        y: 12,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(WORLDMAPC))]
      },
      {
        i: '13',
        x: 0,
        y: 13,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(BASEIMAGE))]
      },
      {
        i: '14',
        x: 0,
        y: 14,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(CHINAMAPP))]
      },
      {
        i: '15',
        x: 0,
        y: 15,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(WORLDMAPP))]
      },
      {
        i: '16',
        x: 0,
        y: 16,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SHADOWTEXT))]
      },
      {
        i: '17',
        x: 0,
        y: 17,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLEFUNNEL))]
      },
      {
        i: '18',
        x: 0,
        y: 18,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLERADAR))]
      },
      {
        i: '19',
        x: 0,
        y: 19,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(SIMPLESANKEY))]
      },
      {
        i: '20',
        x: 0,
        y: 20,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(BARLINE))]
      },
      {
        i: '21',
        x: 0,
        y: 21,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(POPPYRAMID))]
      },
      {
        i: '22',
        x: 0,
        y: 22,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(WORDCLOUD))]
      },
      {
        i: '23',
        x: 0,
        y: 23,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(BARZOOM))]
      },
      {
        i: '24',
        x: 0,
        y: 24,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(LINEZOOM))]
      },
      {
        i: '25',
        x: 0,
        y: 25,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(BASETABLE))]
      },
      {
        i: '26',
        x: 0,
        y: 26,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(RANKINGBAR))]
      },
      {
        i: '27',
        x: 0,
        y: 27,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(DTRANKINGBAR))]
      },
      {
        i: '28',
        x: 0,
        y: 28,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(DTRANKINGBARGRADIENT))]
      },
      {
        i: '29',
        x: 0,
        y: 29,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(DTRANKINGBARIMAGE))]
      },
      {
        i: '30',
        x: 0,
        y: 30,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(DTRANKINGBARGRADIENTIMAGE))]
      },
      {
        i: '31',
        x: 0,
        y: 31,
        w: 1,
        h: 5,
        slideAnimation: { steps: 1, enter: 'fadeIn', leave: 'fadeOut' },
        SlideContent: [JSON.parse(JSON.stringify(CUSTOM))]
      }
    ],
    rawBackground: {
      option: 'texture',
      color: 'rgba(252, 251, 251, 1)',
      linear: {
        angle: 35,
        start: 'rgba(13,56,112,1)',
        end: 'rgba(58,153,178,1)'
      },
      radial: {
        shape: 'ellipse',
        start: 'rgba(58,153,178,1)',
        end: 'rgba(13,56,112,1)'
      },
      custom: 'linear-gradient(20deg, #feac5e, #c779d0, #4bc0c8)',
      image: {
        src: '',
        repeat: 'repeat',
        x: 'center',
        y: 'center',
        width: '100%',
        height: '100%'
      },
      texture: {
        src: ''
      }
    },
    split: 0.2,
    activeLayoutIndex: 0,
    activeArrayIndex: 0,
    maxNum: 10000,
    ratio: 16 / 9,
    innerWidth: 1,
    innerHeight: 1,
    screenWidth: 1000,
    screenHeight: 800,
    insideActiveLayoutIndex: 0,
    insideActiveArrayIndex: 0,
    insideMaxNum: 10000
  },
  getters: {
    getBackground (state) {
      switch (state.rawBackground.option) {
        case 'color':
          return state.rawBackground.color
        case 'linear':
          return `linear-gradient(${state.rawBackground.linear.angle}deg, ${state.rawBackground.linear.start}, ${state.rawBackground.linear.end})`
        case 'radial':
          return `radial-gradient(${state.rawBackground.radial.shape}, ${state.rawBackground.radial.start}, ${state.rawBackground.radial.end})`
        case 'custom':
         return state.rawBackground.custom
        case 'image':
          return `url(${state.rawBackground.image.src}) no-repeat ${state.rawBackground.image.x} ${state.rawBackground.image.y} /  ${state.rawBackground.image.width} ${state.rawBackground.image.height}`
        case 'texture':
          return `url(${state.rawBackground.texture.src}) repeat`
      }
    },
    sortLayout (state) {
      var layout = JSON.parse(JSON.stringify(state.layout))
      layout.sort((a, b) => {
        return a.y - b.y
      })
      var newLayout = layout.map((layoutItem, index) => {
        layoutItem.i = index.toString()
        var newSlideContent = layoutItem.SlideContent.map((item, index) => {
          item.i = index.toString()
          return item
        })
        layoutItem.SlideContent = newSlideContent
        return layoutItem
      })
      return newLayout
    }
  },
  mutations: {
    updateSplit (state, payload) {
      state.split = payload
    },
    updateLayout (state, payload) {
      console.log('updateLayout')
      console.log(payload)
      state.layout = payload
    },
    addMaxNum (state) {
      state.maxNum++
    },
    addSlide (state) {
      var newSlide = JSON.parse(JSON.stringify(state.slideTemplate.SLIDE))
      newSlide.i = state.maxNum
      newSlide.y = state.layout[state.activeArrayIndex].y + 5
      state.layout.push(newSlide)
    },
    copySlide (state) {
      var newSlide = JSON.parse(JSON.stringify(state.layout[state.activeArrayIndex]))
      newSlide.i = state.maxNum
      newSlide.y = state.layout[state.activeArrayIndex].y + 5
      state.layout.push(newSlide)
    },
    deleteSlide (state, payload) {
      state.layout.splice(payload, 1)
    },
    updateActiveLayoutIndex (state, payload) {
      state.activeLayoutIndex = payload
      state.insideActiveLayoutIndex = -1
      console.log('选中了' + payload)
    },
    updateActiveArrayIndex (state, payload) {
      state.activeArrayIndex = payload
    },
    updateRatio (state, payload) {
      state.ratio = payload
    },
    updateInnerHeight (state, payload) {
      state.innerHeight = payload
    },
    updateInnerWidth (state, payload) {
      state.innerWidth = payload
    },
    updateInsideActiveLayoutIndex (state, payload) {
      state.insideActiveLayoutIndex = payload
    },
    updateInsideActiveArrayIndex (state, payload) {
      state.insideActiveArrayIndex = payload
    },
    addItem (state, payload) {
      var newItem
      switch (payload.itemName) {
        case 'BASEIMAGE':
          newItem = JSON.parse(JSON.stringify(state.itemTemplate.BASEIMAGE))
          newItem.itemContent.detail.src = payload.src
          break
        default:
          newItem = JSON.parse(JSON.stringify(state.itemTemplate[payload.itemName]))
      }
      newItem.i = state.insideMaxNum.toString()
      console.log(newItem)
      state.layout[state.activeArrayIndex].SlideContent.push(JSON.parse(JSON.stringify(newItem)))
      state.insideMaxNum += 1
    },
    copyItem (state) {
      var newItem = JSON.parse(JSON.stringify(state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex]))
      newItem.i = state.insideMaxNum.toString()
      newItem.y++
      console.log(newItem)
      state.layout[state.activeArrayIndex].SlideContent.push(newItem)
      state.insideMaxNum++
    },
    deleteItem (state) {
      state.layout[state.activeArrayIndex].SlideContent.splice(state.insideActiveArrayIndex, 1)
    },
    updateDetailSheetData (state, { data, nr, nc }) {
      if (state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.sheetData) {
        state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.sheetData = data
        state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.nr = nr
        state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.nc = nc
      } else {
        console.log('不存在sheetData')
      }
    },
    updateDetailText (state, payload) {
      state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.text = payload
    },
    updateDetailColorPure (state, payload) {
      state.layout[state.activeArrayIndex].SlideContent[state.insideActiveArrayIndex].itemContent.detail.color.pure = payload
    }
  },
  actions: {
  },
  modules: {
  }
})
